<script setup>
import { ref } from 'vue';
import Header from "@/components/Header.vue";
import {listMyPost} from "@/api/post/post.js";

const activeTab = ref('posts');
const ACCOUNT = localStorage.getItem('account');
const USERNAME = localStorage.getItem('username');
const AVATAR = localStorage.getItem('avatar');
const posts = ref([
  {
    title: '帖子标题一',
    description: '帖子简介内容，展示帖子大致内容，吸引用户点击查看。',
    date: '2024-12-12',
    views: 209,
    comments: 0,
  },
  {
    title: '帖子标题二',
    description: '帖子简介内容，展示帖子大致内容，吸引用户点击查看。',
    date: '2024-12-10',
    views: 345,
    comments: 5,
  },
  {
    title: '帖子标题三',
    description: '帖子简介内容，展示帖子大致内容，吸引用户点击查看。',
    date: '2024-12-08',
    views: 156,
    comments: 2
  },
])
listMyPost(ACCOUNT).then((res) => {
  posts.value = res.data
  console.log(res.data)
})
</script>

<template>
  <div >

    <Header></Header>

    <div class="profile-banner">
      <div class="profile-info">
        <img :src="AVATAR" alt="Avatar" />
        <div class="info">
          <h2>{{ USERNAME }}</h2>
          <p>个人简介：这是一段个人简介。</p>
        </div>
      </div>
    </div>

    <el-tabs class="tabs" v-model="activeTab">
      <el-tab-pane label="我的帖子" name="posts"></el-tab-pane>
      <el-tab-pane label="我的关注" name="followers"></el-tab-pane>
      <el-tab-pane label="我的粉丝" name="fans"></el-tab-pane>
    </el-tabs>

    <div class="content">
      <el-card class="post" v-for="(post, index) in posts" :key="index" shadow="hover">
        <h3>{{ post.content }}</h3><el-tag v-if="post.isNameless" style="height: 20px;padding: 0 7px;color: #777777;font-size: 11px;background: #e8e8e8;border-color: #a9a9a9" effect="light" type="info">匿名</el-tag>
        <!-- todo 一些统计数据 等以后完成 -->
<!--        <p>{{ post.description }}</p>-->
        <div class="meta">发布时间：{{  post.createTime }} | 阅读量：{{ post.viewNum }} | 评论：{{ post.commentNum }}</div>
      </el-card>
    </div>

    <el-footer class="footer">
      &copy; 2024 模拟个人主页. 保留所有权利。
    </el-footer>
  </div>
</template>


<style scoped>

.nav-links a {
  margin-right: 15px;
  text-decoration: none;
  color: #555;
  font-size: 14px;
}

.profile-banner {
  background: url('@/assets/img/index/postBG.png') no-repeat;
  background-size: cover;
  height: 200px;
  position: relative;
}

.profile-info {
  position: absolute;
  bottom: -50px;
  left: 20px;
  display: flex;
  align-items: center;
}

.profile-info img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #fff;
}

.profile-info .info {
  margin-left: 15px;
}

.profile-info .info h2 {
  font-size: 20px;
  color: #fff;
}

.profile-info .info p {
  font-size: 14px;
  color: #dcdcdc;
}

.tabs {
  background-color: #fff;
  padding: 10px 20px;
  margin-top: 50px;
  display: flex;
  border-bottom: 1px solid #eaeaea;
}

.content {
  padding: 20px;
}

.post {
  margin-bottom: 15px;
}

.meta {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.footer {
  background-color: #fff;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: #666;
  margin-top: 20px;
  border-top: 1px solid #eaeaea;
}
</style>
